<template>
	<div class="back-stage">
		<el-container>
			<el-aside width="200px">
                <Eltree></Eltree>
            </el-aside>
			<el-container>
				<el-header>
                    <NavBar></NavBar>
                </el-header>
				<el-main>
                    <!-- 四个卡片 -->
                    <BaseInfo></BaseInfo>
                </el-main>
				<el-footer>Footer</el-footer>
			</el-container>
		</el-container>
	</div>
</template>

<script>
// @ is an alias to /src
import Eltree from "@/components/Eltree.vue";
import NavBar from '@/components/NavBar.vue';
import BaseInfo from '@/components/BaseInfo.vue'

export default {
	name: "home",
	components: {
        Eltree,
        NavBar,
        BaseInfo
    },
    
    

};
</script>

<style lang="less" scoped>
.el-header,
.el-footer {
	background-color: #b3c0d1;
	color: #333;
	text-align: center;
	line-height: 60px;
}

.el-aside {
	background-color: #304156;
	color: #333;
	text-align: center;
}

.el-main {
	background-color: #e9eef3;
	color: #333;
	text-align: center;
}

section.el-container {
    height: 100%;
	margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
}

.el-container:nth-child(7) .el-aside {
}
.back-stage{
    height: 100%;
}
</style>
